<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/themes/tundra/tundra_rtl.css";
		@import "../../../dijit/tests/css/dijitTests.css";
		@import "../../../dojox/grid/resources/tundraGrid.css";
	</style>

	<title>Google Search Store with Grid</title>

	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript" src="../../../dijit/dijit.js"></script>
	<script type="text/javascript" src="../GoogleSearchStore.js"></script>
	<script type="text/javascript">
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.Button");
		dojo.require("dojox.wire.ml.Invocation");
		dojo.require("dojox.wire.ml.Transfer");
		dojo.require("dojox.wire.ml.Action");
		dojo.require("dojox.data.GoogleSearchStore");
		
		var ImageSearch;
		
		dojo.ready(function(){
			ImageSearch = { layout:[], store:{}, grid:{},  }
			
			ImageSearch.format = function(value, row) {
				return "<img src=\"" + value + "\" alt=\"" + ImageSearch.grid.getItem(row).title + "\" style=\"height:80px; width:auto; margin:auto;\">";  			
			}
			
			ImageSearch.layout = [
				[
					{ name: "Title", field: "title", width: 20 },
					{ name: "Summary", field: "content", width: 20 },
					{ name: "URL", field: "url", width: "auto", formatter: ImageSearch.format }
				]
			];
			
			ImageSearch.store = new dojox.data.GoogleImageSearchStore();
			
			ImageSearch.grid = new dojox.grid.DataGrid({
				store: 		ImageSearch.store,
				structure: 	ImageSearch.layout,
				query:		{ text: 'cat' },
				style: 		"width: 720px; height: 500px;",
				rowsPerPage: 20,
				escapeHTMLInData: false
			}, "googleGrid");
						
			ImageSearch.grid.startup();
			
		});

		var newQuery = {text: 'cat' }; 
	</script>
</head>
<body class="tundra" style="margin:20px;">
	<h1>dojox.data.GoogleImageSearchStore:</h1>
	<i>Displays a list of results from a google image search.</i><br>
	<div dojoType="dijit.form.TextBox" id="searchText" value="cat"></div> 
	<button dojoType="dijit.form.Button" id="searchButton">Search</button>
	<br>
	<br>
	<div id="googleGrid"></div>
	<div dojoType="dojox.wire.ml.Action" trigger="searchButton" triggerEvent="onClick">
		<div dojoType="dojox.wire.ml.Transfer" source="searchText.value" target="newQuery.text"></div>
		<div dojoType="dojox.wire.ml.Invocation" object="ImageSearch.grid" method="setQuery" parameters="newQuery"></div>
	</div>    
</body>
</html>
